﻿<!DOCTYPE html>

<!-- map.js: imaginary water supply map -->

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<link rel="stylesheet" href="example.css">
</head>

<body>
	<script type="module">
	
		import {Map} from '../map.js';
		import {scene} from './example.js';


		new Map( '../map.xml', drawMap );

		function drawMap( map )
		{
			for( var regionName in map.regions )
				if( regionName!='BG' )
				{
					var value = Math.random(),
						color = new THREE.Color( value, value/2+0.5, 1 ),
						radius = 1.5-value;
					
					scene.add( map.region3D( regionName, 1, color ) );
					scene.add( map.region2D( regionName, 1 ) );
					
					var water = new THREE.Mesh(
							new THREE.IcosahedronGeometry( radius, 4 ),
							new THREE.MeshPhysicalMaterial( {
									color: 'cyan',
									roughness: 0.5,
									metalness: 0.2,
									transmission: 1,
									ior: 0.2,
									reflectivity: 0.1,
									thickness: 5,
									depthTest: false,
									depthWrite: false,
									opacity: 0.8,
									transparent: true
							} )
						);
						
					water.position.copy( map.center( regionName, 1+radius ) );
					water.castShadow = true;
					scene.add( water );
				}
		}
		 
		 
	</script>
</body>
</html>


